

<template>
  <div>
<!--    搜索表单-->
    <el-card>
      <el-form ref="queryForm" :inline="true" :model="queryInfo" label-width="68px">
        <el-form-item label="区域" prop="region">
          <el-select v-model="queryInfo.region" filterable placeholder="请选择">
            <el-option
              v-for="(item,index) in regionOptions"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="凹陷" prop="dent">
          <el-select v-model="queryInfo.dent" filterable placeholder="请选择">
            <el-option
              v-for="(item,index) in dentOptions"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="井号" prop="wellname">
          <el-select v-model="queryInfo.wellname" filterable placeholder="请选择">
            <el-option
              v-for="(item,index) in wellnameOptions"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary">搜索</el-button>
        <el-button type="primary" @click="handleClick('openFormDialog')">数据导入</el-button>
        <el-button type="info" @click="handleClick('fileUpload')">文件上传</el-button>

      </el-form>
    </el-card>

<!--    引用表格组件-->
    <div>
      <elTableComponent
        :tableData="tableData"
        :cellAll="cellAll"
      >
        <!-- 在操作列中插入自定义按钮 -->
        <template #default="{ row }">
          <el-button
            type="text"
            @click="handleClick('edit' , row)"
          >
            编辑
          </el-button>
        </template>
      </elTableComponent>

<!--      分页组件-->
<!--      <pagination></pagination>-->
    </div>

<!--    文件上传弹窗-->
    <uploadFileComponent ref="uploadFileComponent"></uploadFileComponent>

<!--    动态表单弹窗-->
    <formDialogComponent ref="formDialogComponent"></formDialogComponent>
  </div>
</template>
<script>
import { getDictList } from "@/api/vadmin/budget/ledger/ledgerapi";
import { Decrypt } from "@/utils/AesHmacMD5";
import elTableComponent from "@/views/components/elTableComponent.vue";
import uploadFileComponent from "@/views/components/uploadFileComponent.vue";
import pagination from "@/views/components/pagination.vue";
import formDialogComponent from "@/views/components/formDialogComponent.vue";

export default {
  name: "index",
  components: {
    elTableComponent,
    uploadFileComponent,
    pagination,
    formDialogComponent
  },
  data() {
    return {
      //搜索表单
      queryInfo: {
        region: '', //区域
        dent: '', //凹陷
        wellname: '', //井号
      },

      regionOptions: [], //区域数组
      dentOptions: [], //凹陷数组
      wellnameOptions: [], //井号数组

      //表格数据
      tableData: [
        {region: '东部区域', dent: '凹陷', wellName: '井号1', wellType: '井别1'},
        {region: '西部区域', dent: '凹陷', wellName: '井号1', wellType: '井别1'},
      ],
      //可显示列====全部的
      cellAll: [
        {label: '区域', prop: 'region',},
        {label: '凹陷', prop: 'dent',},
        {label: '井号', prop: 'wellName',},
      ],//选中的单元格
    }
  },
  mounted() {
    this.getDict();
  },
  methods: {
    //查询所有的区域 凹陷 井号
    getDict() {
      getDictList(this.addDateRange('aa')).then(response => {
        let res = JSON.parse(Decrypt(response.data));
        //区域数组
        this.regionOptions = res.region.flat();
        //凹陷数组
        this.dentOptions = res.dent.flat();
        //井号数组
        this.wellnameOptions = res.wellname.flat();
      })
    },



    handleClick(type, row) {
      switch (type) {
        case 'fileUpload' :
          this.$refs.uploadFileComponent.showDialog('文件上传')
          break
        case 'edit' :
          console.log('编辑', row);
          break
        case 'openFormDialog' :
          console.log('打开表单弹窗');
          this.$refs.formDialogComponent.showDialog('表单弹窗')
          break

      }
    }
  }
};
</script>

<style scoped>

</style>
